<template>
  <div class="home">
    <!--  导航开始 -->
    <commonHeader
      :title="title"
      :subtitle="subtitle"
      @goBack="goBack()"
      @goSubtitle="goSubtitle()">
    </commonHeader>
<!--    内容-->
    <div class="content">
      <!--      背景图-->
      <div class="topBgPic">
        <!--        视频-->
        <div v-if="playerOptions.sources[0].src" class="videoContainer">
          <video-player  class="video-player vjs-custom-skin"
                         ref="videoPlayer"
                         style="margin-bottom:0.2rem"
                         :playsinline="true"
                         :options="playerOptions"
                         @pause="onPlayerPause($event)"
                         @play="onPlayerPlay($event)"
                         @timeupdate="onPlayerTimeupdate($event)"
                         @ended="onPlayerEnded($event)"
          ></video-player>
<!--          curriculumTabsIndex 0 学历课程  1非学历课程-->
<!--          只有学历课程可以考试-->
          <div @click="goEducation()" class="examination flex-space-center" v-if="curriculumTabsIndex*1 < 1 && examinationShow"><img src="http://job.dayinyun.com/examinationIcon.png" alt="">参加考试</div>
        </div>
        <!--        图片-->
        <img v-else src="http://job.dayinyun.com/oldUniversityBanner.png" alt="">
      </div>
      <!--      tab切换-->
      <div class="tabs flex-space-between">
        <div class="tab" v-for="(item,index) in tabsList" :key="index" @click="changeTab(index)">
          <img :src="tabIndex==index?item.choosedPic:item.pic" alt="">
          <div class="tabItmes" :class="{'tabActivity':tabIndex==index}">
            {{item.title}}
          </div>
        </div>
      </div>
      <!--      内容切换-->
      <div>
        <!--        介绍-->
        <div v-show="tabIndex*1==0">
          <introduce ref="introduce"></introduce>
        </div>
        <!--        报名  选择分校-->
        <div v-show="tabIndex*1==1">
          <branchSchool ref="branchSchool"></branchSchool>
        </div>
        <!--        课程-->
        <div v-show="tabIndex*1==2">
          <curriculum ref="curriculum" @exportVideoUrl="exportVideoUrl"></curriculum>
        </div>
        <!--        学历-->
        <div v-show="tabIndex*1==3">
          <education ref="education"></education>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import introduce from "./components/introduce.vue" //介绍
  import branchSchool from "./components/branchSchool.vue" //报名 选择分校
  import curriculum from "./components/curriculum.vue" //课程
  import education from "./components/education.vue" //学历
  import {setStore,getStore} from "../../commonUtil/mUtils";
  import {WATCHLESSON} from "../../apis/oldUniversity";
  export default {
    name:"home",
    components:{
      commonHeader,
      introduce,
      branchSchool,
      curriculum,
      education
    },
    data() {
      return {
        title:"国开老年大学",
        subtitle:"联系我们",
        tabsList:[
          {
            title:"介绍",
            pic:"http://job.dayinyun.com/tabIcon1.png",
            choosedPic:"http://job.dayinyun.com/tabIcon1-1.png",
          },
          {
            title:"报名",
            pic:"http://job.dayinyun.com/tabIcon2.png",
            choosedPic:"http://job.dayinyun.com/tabIcon2-1.png",
          },
          {
            title:"课程",
            pic:"http://job.dayinyun.com/tabIcon3.png",
            choosedPic:"http://job.dayinyun.com/tabIcon3-1.png",
          },
          {
            title:"学历",
            pic:"http://job.dayinyun.com/tabIcon4.png",
            choosedPic:"http://job.dayinyun.com/tabIcon4-1.png",
          }
        ],
        tabIndex:0,//tab默认下标
        examinationShow:false,//参加考试按钮
        curriculumTabsIndex:0,//0学历课程 1非学历课程
        videoMsg:{},//视频
        isVideoPlay:false,//视频是否播放
        // 视频配置
        playerOptions: {
          // videojs options
          width:690,
          height:210,
          muted: false,
          language: 'zh-CN',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          sources: [{
            type: 'application/x-mpegURL',
            // type: "video/mp4",
            src:"",
          }],
          poster: "/static/images/author.jpg",
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        }
      }
    },
    mounted() {
      this.loading()
      // 把路径里面的token 存起来
      let token = this.$route.query.token?this.$route.query.token:''
      if(getStore('token')!='undefined'){
        setStore('token',token);
      }
      // tab 下标
      this.tabIndex = this.$route.query.tabIndex?this.$route.query.tabIndex:0
      // 切换到不同的tab请求不同的接口
      this.changeTabGetMsg()

    },
    methods:{
      // 返回
      goBack(){
        // 返回APP
        if (this.systemInfo() === "android") {
          window.android.closeCurrentPage();
        } else if (this.systemInfo() === "ios") {
          window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
        }
      },
      // 联系我们
      goSubtitle(){
        this.$router.push("/contactUs")
      },
      // 切换tab
      changeTab(index){
        this.tabIndex = index
        // 切换的时候视频初始化
        this.playerOptions.sources[0].src =  '';//视频路径
        this.playerOptions.poster = '';//默认封面图
        // 切换到不同的tab请求不同的接口
        this.changeTabGetMsg()
      },
      // 不同下标请求不同接口
      changeTabGetMsg(){
        // 介绍
        if(this.tabIndex*1==0){
          this.$refs.introduce.getSchoolDetails();
        }
        // 报名
        if(this.tabIndex*1==1){
          this.$refs.branchSchool.isSingup();//是否报名
        }
        // 课程
        if(this.tabIndex*1==2){
          this.$refs.curriculum.getLessonCateTwo();//获取课程二级分类
          this.$refs.curriculum.getLessonList();//全部课程列表
        }
        // 学历
        if(this.tabIndex*1==3){
          this.$refs.education.getUserCert();//获取证书
        }
      },
      // ------------------------视频相关开始-------------------
      // 判断用户是什么网
      getNetworkType() {
        var ua = navigator.userAgent;
        var networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other';
        networkStr = networkStr.toLowerCase().replace('nettype/', '');
        var networkType;
        switch(networkStr) {
          case 'wifi':
            networkType = 'wifi';
            break;
          case '4g':
            networkType = '4g';
            break;
          case '3g':
            networkType = '3g';
            break;
          case '3gnet':
            networkType = '3g';
            break;
          case '2g':
            networkType = '2g';
            break;
          default:
            networkType = 'other';
        }
        return networkType
      },
      // 导出视频路径
      exportVideoUrl(item,curriculumTabsIndex){
        this.curriculumTabsIndex = curriculumTabsIndex;//0 学历课程 1非学历课程
        this.$nextTick(()=>{
          // 切换的时候视频初始化
          this.isVideoPlay = false;//视频是否播放
          this.playerOptions.sources[0].src =  '';//视频路径
          this.playerOptions.poster = '';//默认封面图
          this.playerOptions.sources[0].src =  item.url;//视频路径
          this.playerOptions.sources[0].type = 'application/x-mpegURL';//视频类型
          this.playerOptions.poster = item.img;//默认封面图
          this.videoMsg = item;
        })
      },
      // listen event
      onPlayerPlay(player) {
        // 判断用户当前是否是wifi
        let networkType =  this.getNetworkType();
        if(networkType!='wifi'){
          this.$toast("当前使用的是非wifi - 请注意流量消耗")
        }
        // 没有播放 累加一次观看课程记录

        this.isVideoPlay = true;
        if(this.isVideoPlay){
          this.watchLesson();//观看记录
        }
      },
      // 暂停播放
      onPlayerPause(player) {
        console.log('player pause!', player)
      },
      // ...player event
      onPlayerTimeupdate(player){
        var currentTime,//播放时长
             duration,//总时长
             percentage;//百分数
          currentTime = player.cache_.currentTime
          duration = player.cache_.duration
          percentage = parseInt((currentTime*100/duration*100)/100)
        // 考试按钮是否显示
        this.examinationShow = percentage*1>=50?true:false
      },
      // 视频播放完成
      onPlayerEnded(){
        this.isVideoPlay = false;
      },
      // 视频观看记录  累加
      watchLesson(){
        let watchLesson = WATCHLESSON
        let params = {
          lesson_id:1,//课程id
        }
        watchLesson(params).then( res => {
          if(res.data.code*1===200){

          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 去考试 跳转考试页面
      goEducation(){
        window.location.href = 'https://fquiz.hongjitimes.com/examination?videoid='+this.videoMsg.cid+'&type='+2+'&name='+this.videoMsg.name
      }
      // 视频相关结束
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .home{
    width:100%;
    padding:1.38rem 0rem 0.3rem 0rem;
    box-sizing: border-box;
    .content{
      width:100%;
      .topBgPic{
        width:100%;
        padding:0 0.3rem;
        box-sizing: border-box;
        .videoContainer{
          width:100%;
          height:100%;
          object-fit:fill;
          position: relative;
          /deep/.vjs-big-play-button{
            font-size: 2.5em;
            line-height: 2.3em;
            height: 2.5em;
            width: 2.2em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 50%;
            background-color: rgba(115,133,159,.5);
            border-width: 0.12em;
            margin-top: -1.25em;
            margin-left: -1.45em;
          }
          .examination{
            position: absolute;
            top:0.2rem;
            right:0.2rem;
            width:1.6rem;
            height:0.48rem;
            background:#FEA300;
            border:0.02rem solid rgba(255, 255, 255, 0.32);
            border-radius:0.05rem;
            font-size:@fontSize24;
            font-family:@fontFamily400;
            font-weight:@fontWeight400;
            color:@whiteColor;
            img{
              width:0.22rem;
              height:auto;
              margin-right:0.07rem;
            }
          }
        }
        img{
          width:100%;
          height: auto;
        }
      }
      /*tab*/
      .tabs{
        width:100%;
        padding:0.24rem 0.65rem;
        box-sizing: border-box;
        /*margin-top:-0.2rem;*/
        /*border-bottom: 0.02rem solid rgba(255,255,255,0.4);*/
        .tab{
          display: flex;
          flex-direction: column;
          justify-content: center;
          img{
            width:auto;
            height: 0.56rem;
            margin-bottom: 0.1rem;
          }
          .tabItmes{
            font-size:@fontSize28;
            font-weight: @fontWeight500;
            font-family:@fontFamily400;
            color:@whiteColor;
          }
          .tabActivity{
            color:#FEA300;
          }
        }
      }
    }
  }
</style>
